<template>
<!-- 可以用:style   也可以用:class -->
<!-- 这个动态的id就是一个挂载点 -->

    <div :id="id" :style="{width: width + 'px', height: height + 'px', margin: '34px auto'}" class="m-map"></div>
    
</template>

<script>
export default {
    props: {
        width: {
            type: Number,
            default: 300
        },
        height: {
            type: Number,
            default: 300
        },
        point: {
            // 经纬度
            type: Array,
            default() {
                return [116.46,39.92]
            }
        }
    },
    data() {
        return {
            id: `map`,
            key: '11721c56459a26f1e6d1f5bf933281f9',
            pointer: ''
        }
    },
    // 我们需要在mounted中进行异步加载,因为要获取window对象
    mounted() {
        let _this = this
        // 动态id什么时候挂载什么时候生成
        _this.id = `map${Math.random().toString().slice(4,6)}`

        window.onmaploaded= () => {
            let map = new window.AMap.Map(_this.id,{
                resizeEnable: true,
                zoom: 11,
                // 经纬度
                center: _this.point
            })
            _this.map = map
            // 添加plugin
            window.AMap.plugin('AMap.ToolBar', () => {
                let toobar = new window.AMap.ToolBar()
                map.addControl(toolbar)
                // 地图中的位置标记
                let marker = new window.AMap.Marker({
                        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                        position: _this.point
                })
               _this.marker = marker
               marker.setMap(map)
            }) 
        }
        const url = `https://webapi.amap.com/maps?v=1.4.13&key=${_this.key}&callback=onmaploaded`
        let jsapi = document.createElement('script');
        jsapi.charset= 'utf-8'
        jsapi.src = url
        document.head.appendChild(jsapi)
        _this.pointer = _this.point[0]
    },
    watch: {
        point() {
            if (this.point[0] !== this.pointer) {
                let _this = this
                // 动态id什么时候挂载什么时候生成
                _this.id = `map${Math.random().toString().slice(4,6)}`

                window.onmaploaded= () => {
                    let map = new window.AMap.Map(_this.id,{
                        resizeEnable: true,
                        zoom: 11,
                        // 经纬度
                        center: _this.point
                    })
                    _this.map = map
                    // 添加plugin
                    window.AMap.plugin('AMap.ToolBar', () => {
                        let toobar = new window.AMap.ToolBar()
                        map.addControl(toolbar)
                        // 地图中的位置标记
                        let marker = new window.AMap.Marker({
                                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                                position: _this.point
                        })
                    _this.marker = marker
                    marker.setMap(map)
                    }) 
                }
                const url = `https://webapi.amap.com/maps?v=1.4.13&key=${_this.key}&callback=onmaploaded`
                let jsapi = document.createElement('script');
                jsapi.charset= 'utf-8'
                jsapi.src = url
                document.head.appendChild(jsapi)
            }
        }
    }
}
</script>

<style lang="scss">
    
</style>


